<template>
	<div class="page">
		<div class="center">
			<div class="el-breadcrumb">
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-home"></i>应用列表</el-breadcrumb-item>
					<el-breadcrumb-item>运行</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<el-row type="flex">
				<el-col class="col-card-form" :xs="24" :sm="12">
					<div class="bg-form-title">
						<span>{{appTitle}}</span>
					</div>
				</el-col>
			</el-row>
			<el-row type="flex">
				<el-col class="col-card-form" :xs="24" :sm="12">
					<div class="app-note">
						<span>{{desc}}</span>
					</div>
				</el-col>
			</el-row>
			<el-row type="flex">
				<el-col class="col-card-form" :xs="24" :sm="10">
					<el-input type="textarea" placeholder="这款 App 可以将任意语言的内容，翻译成中文" v-model="examples"
						:autosize="{ minRows: 5}">
					</el-input>
				</el-col>
			</el-row>
			<el-row class="run-btn">
				<el-button @click="run" type="primary">运行</el-button>
				<el-button type="info" plain v-if="content != '' " @click="copyText()">复制</el-button>
			</el-row>
			<el-row type="flex" v-if="isShowRun">
				<el-col class="col-card-form col-res-text" :xs="24" :sm="10">
					<el-input type="textarea" v-loading="loading" v-model="content" :autosize="{ minRows: 5}">
					</el-input>
				</el-col>
			</el-row>
			
			<el-dialog 
			  title="提示"
			  :visible.sync="dialogVisible"
			  :width="dialogWidth"
			  center
			  >
			  <span>{{dialogContent}}</span>
			  <span slot="footer" class="dialog-footer">
			    <el-button @click="dialogVisible = false">取 消</el-button>
			    <el-button type="primary" @click="handleClose">确 定</el-button>
			  </span>
			</el-dialog>
		</div>

		<!-- 登录 -->
		<Login :centerDialogVisible="loginShow" 
			@click="clickDialog"  
			:title="title"
			v-bind:isLogin.sync="isLogin">
			<!-- :isLogin="isLogin" -->

		</Login>

	</div>
</template>
<script>
	import Login from "./Login.vue"
	import {baseUrl} from '../utils/global.js'
	import axios from "axios";
	import Vue from 'vue'
	import jsCopy from '../utils/copy.js'
	export default {
		name: 'RunAPP',
		components: {
			Login
		},

		data() {
			return {
				loginShow: false,
				isShowRun: false,
				password: "",
				isLogin: true,
				title: "",
				appTitle: "",
				desc: "",
				instruct: "",
				examples: "",
				content: "",
				loading: true,
				dialogVisible: false,
				dialogContent: "",
				dialogWidth: "30%"
			}
		},
		methods: {
			handleClose() {
				if(Vue.$cookies.get('token') == null){
					this.isLoginToken()
				}
				this.dialogVisible = false
			},
			run() {
				/* if(Vue.$cookies.get('token') == null){
					this.isLoginToken();
					return
				} */
				if (this.instruct == "") {
					this.$message.error("指令不能为空");
					return
				}
				if (this.instruct > 150) {
					this.$message.error("指令长度不能超过100");
					return
				}
				if (this.examples == "") {
					this.$message.error("示例不能为空");
					return
				}
				if (this.examples.length > 250) {
					this.$message.error("示例长度不能超过100");
					return
				}
				this.isShowRun = true;
				this.content = ""
				this.loading = true

				const config = {
					headers: {
						"Authorization": "bearer " + Vue.$cookies.get('token'),
					}
				};
				let data = {
					"instruct": this.instruct,
					"examples": this.examples
				};
				axios.post(baseUrl + "/chat_application/application/chat", data, config)
					.then((res) => {
						if (res.status == 200) {
							this.loading = false
							this.content = res.data.message.content
						}
					})
					.catch((res) => {
						if (res.response.status == 400) {
							this.dialogContent = "超出免费试用次数,登录可增加使用次数 是否继续?"
							if(Vue.$cookies.get('token') != null){
								this.dialogContent = "免费试用次数已使用完"
							}
							this.dialogVisible = true
							
							/* this.$confirm(confirmContent, '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning',
								center: true
							}).then(() => {
								if(Vue.$cookies.get('token') == null){
									this.isLoginToken()
								}
							}).catch(() => {
								
							}); */
							this.loading = false
							return
						}
						this.$message.error(res.response.data.detail);
						this.loading = false
					});
			},
			clickDialog(data) {
				if (data.index == 0 || data.index == 1) {
					this.loginShow = false
				}

			},
			/* 是否登录 */
			isLoginToken() {
				if (Vue.$cookies.get('token') == null) {
					this.loginShow = true
					this.isLogin = true
					this.title = "欢迎登录"
				}
			},
			copyText() {
				jsCopy.copyText(this.content)
			},
			menuSeen(){
			    // 屏幕尺寸
			    let screenHeight=document.body.clientWidth;
			    if(screenHeight>415){
			        this.dialogWidth="30%";
			    }else{
			        this.dialogWidth="90%";
			    }
			},

		},
		mounted() {
			this.appTitle = this.$route.query.title;
			this.desc = this.$route.query.desc;
			this.instruct = this.$route.query.instruct;
			this.examples = this.$route.query.examples;
			this.menuSeen()
			/* this.isLoginToken() */
		},
	}
</script>

<style scoped>
	@import '../../static/css/RunApp.css'
</style>
